<template>
  <v-form ref="form" class="form pa-4">
    <v-container class="pa-0">
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Cate Code</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card width="45%" flat>
            <v-text-field
              v-model="cateCode"
              v-validate="'required'"
              name="Cate Code"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Cate Code") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Description</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card class="d-flex align-center" width="(45% + 36px)" flat>
            <v-text-field
              v-model="description"
              v-validate="'required'"
              name="Description"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
            <v-icon class="pointer ml-3" color="#79839B"> mdi-magnify </v-icon>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Description") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Brand</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card width="45%" flat>
            <v-text-field
              v-model="brand"
              v-validate="'required'"
              name="Brand"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Brand") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Manufacturer</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card width="45%" flat>
            <v-text-field
              v-model="manufacturer"
              v-validate="'required'"
              name="Manufacturer"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Manufacturer") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Item Number</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card width="45%" flat>
            <v-text-field
              v-model="itemNumber"
              v-validate="'required'"
              name="Item Number"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Item Number") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Item Description</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-text-field
            v-model="itemDescription"
            v-validate="'required'"
            name="Item Description"
            hide-details
            solo
            dense
            class="white-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Item Description") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line mb-8" no-gutters>
        <v-col class="text-left" :cols="3">
          <span>Unit Cost</span>
        </v-col>
        <v-col class="text-left" :cols="9">
          <v-card width="45%" flat>
            <v-text-field
              v-model="unitCost"
              v-validate="'required|usd'"
              name="Unit Cost"
              hide-details
              solo
              dense
              class="white-input"
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Unit Cost") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="line px-0 mb-4" no-gutters>
        <v-card class="images-wrap" width="100%" height="215px" flat>
          <viewer :images="attachment" class="images clearfix">
            <template #default="scope">
              <v-row no-gutters>
                <v-col
                  class="image-wrap flex-grow-0"
                  v-for="img in scope.images"
                  :key="img.id"
                >
                  <v-checkbox
                    v-model="selectedFile"
                    multiple
                    :value="img"
                    class="checkbox"
                    color="#556282"
                    hide-details
                  ></v-checkbox>
                  <img :src="img.src" :alt="img.title" class="image" />
                  <div class="img-introduction">
                    <svg>
                      <text x="2" y="10">
                        {{ img.title }}
                      </text>
                    </svg>
                  </div>
                </v-col>
              </v-row>
            </template>
          </viewer>
        </v-card>
      </v-row>
      <v-row class="line" no-gutters>
        <v-col class="pa-0">
          <v-file-input
            prepend-icon="mdi-upload"
            class="upload-btn"
            hide-input
            multiple
            truncate-length="15"
            @change="uploadFile"
          >
          </v-file-input>
        </v-col>
      </v-row>
    </v-container>
    <Dialog
      v-model="showDialog"
      width="480"
      :show-save="false"
      :title="dialogTitle"
    >
      <DeleteAttachment
        :attachments="selectedFile"
        @delete="deleteFile"
      ></DeleteAttachment>
    </Dialog>
  </v-form>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import { IFile } from "@/components/Project/index";
import { readerFile } from "@/common/constants/Utils";
import DeleteAttachment from "@/components/Maintenance/Setting/ItemType/DeleteAttachment.vue";
import { Pick } from "@/common/constants/Utils";
@Component({
  components: {
    Dialog,
    DeleteAttachment,
  },
})
export default class AddEditItem extends Vue {
  selectedFile: IFile[] = [];
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // formData
  id: string | null = "";
  cateCode: string | null = "";
  description: string | null = "";
  brand: string | null = "";
  manufacturer: string | null = "";
  itemNumber: string | null = "";
  itemDescription: string | null = "";
  unitCost: string | null = "";
  attachment: IFile[] = [];
  resetForm() {
    this.id = null;
    this.$set(this, "attachment", []);
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  // file
  openDeleteAttachment() {
    if (this.attachment.length === 0 || this.selectedFile.length === 0) {
      return;
    }
    this.dialogTitle = "Delete  Attachment";
    this.openDialog();
  }
  deleteFile() {
    this.attachment = this.attachment.filter(
      (item) => !this.selectedFile.includes(item)
    );
    this.closeDialog();
  }
  // upload
  async uploadFile(files: HTMLInputElement["files"]) {
    if (!files) return;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const reader: FileReader = await readerFile(file);
      if (!reader.error) {
        // 文件转base64成功
        const fileName = file.name;
        //获取后缀 判断文件格式
        const index = fileName.lastIndexOf(".");
        const ext = fileName.substring(index + 1).toLowerCase();
        const fileObj = {
          id: `${new Date().getTime()}-${fileName}`,
          ext: ext,
          src: reader.result as string,
          title: fileName,
        };
        this.attachment.push(fileObj);
      } else {
        // 文件转base64失败
      }
    }
  }

  getFormData() {
    return Pick(this, [
      "id",
      "cateCode",
      "description",
      "brand",
      "manufacturer",
      "itemNumber",
      "itemDescription",
      "unitCost",
      "attachment",
    ]);
  }

  async validateFormData() {
    const valid = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
@import "./AddEditItem.scss";
</style>
